import React, { useEffect, useState } from 'react'
import {useParams,useNavigate} from 'react-router-dom'
import { functionList } from '../../app/carStore'
import { useAppDispatch } from '../../app/hooks'
import axios from 'axios'
interface itemType{
  url: string,
  title: string,
  id: string,
  sum:number
}
const Text:React.FC = () => {
  const navigate=useNavigate()
  const dispatch=useAppDispatch()
  const {id}=useParams()
  const [item,getItem]=useState<itemType>()
  const getItemDate=async()=>{
    const resp=await axios.get('/api/text',{params:{id:id}})
    getItem(resp.data.item)
  }
  const itemClick=()=>{
    dispatch(functionList(item as itemType))
    navigate('/home')
  }
  useEffect(()=>{
    getItemDate()
  },[])
  return (
    <div className='text'>
      <div>
        <img src={item?.url} alt="" />
      </div>
      <div>{item?.title}</div>
      <button onClick={()=>itemClick()}>加入购物车</button>
    </div>
  )
}

export default Text